<template>
  <div class="basic_wrap">
    <div class="item_wrap">
      <div class="item_list">
        <van-list
          v-model="loading"
          loading-text=" "
          offset="0"
          :finished="finished"
          :finished-text="$t('utils.noData')"
          @load="onLoad"
        >
          <div
            v-for="(item, index) in list"
            :key="index"
            class="block_div item"
            @click="$router.push('/hot/detail/' + item.id)"
          >
            <div class="logo pos-relative">
              <!-- 2 爆款 3 新品 -->
              <van-tag
                v-if="item.status === 2"
                size="medium"
                class="hot-tag"
                type="warning"
              >
                {{ $t("hot.hotProducts") }}
              </van-tag>
              <van-tag
                v-if="item.status === 3"
                size="medium"
                class="hot-tag"
                type="warning"
              >
                {{ $t("hot.newProduct") }}
              </van-tag>
              <img v-lazy="item.img">
              <div>{{ item.title }}</div>
            </div>
            <div class="detail">
              <div v-if="item.status === 3">
                <span class="detail_name">{{ $t("hot.startTime") }}</span><span class="detail_num">
                  {{ item.start_time_str }}
                </span>
              </div>
              <div v-if="item.status === 2">
                <div class="flex_left_center">
                  <div class="detail_name">
                    {{ $t("hot.distanceEnd") }}
                  </div>
                  <div>
                    <van-count-down
                      :time="item.distanceEnd"
                      :format="countFormat"
                    />
                  </div>
                </div>
              </div>
              <div class="flex_center">
                <div>
                  <div>
                    <span class="detail_name">{{ $t("index.amount") }}</span><span
                      class="detail_num"
                    >{{ common.currency_symbol_basic()
                    }}{{ common.precision_basic(item.min) }}</span>
                  </div>
                  <div>
                    <span class="detail_name">{{
                      $t("hot.limitedPurchase")
                    }}</span><span class="detail_num">{{ item.day }}</span>
                  </div>
                </div>
                <div>
                  <div>
                    <span class="detail_name">{{
                      item.type == 1 ? $t("index.dailyRate") : $t("index.rate")
                    }}</span><span class="detail_num">{{ item.rate }}%</span>
                  </div>
                  <div>
                    <span class="detail_name">{{ $t("invest.income") }}</span><span
                      class="detail_num"
                    >{{ common.currency_symbol_basic()
                    }}{{ change(item) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import moment from "moment";
import Fetch from "../../utils/fetch";
import { List, Empty, Tag, CountDown, Lazyload } from "vant";
Vue.use(List).use(Empty).use(Tag).use(CountDown).use(Lazyload);
export default {
  name: "",
  data() {
    return {
      empty: false,
      loading: false,
      finished: false,
      list: [],
      page: 1,
      listRows: 8,
      scrollType: false, // 控制按钮显示和隐藏
      scrollTop: 0,
      startForm:
        "YYYY" +
        this.$t("hot.year") +
        "MM" +
        this.$t("hot.month") +
        "DD" +
        this.$t("hot.day"),
      countFormat:"DDD HHH mmm sss"
    };
  },
  created() {
    if (window.plus) {
      window.plus.navigator.setStatusBarBackground("#FAFAFA");
      window.plus.navigator.setStatusBarStyle("dark");
    }
    this.$parent.footer("hot", true);
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true); //这里的true一定要写
  },
  // 组件销毁移除监听
  destroyed() {
    window.removeEventListener("scroll", this.handleScoll);
  },
  methods: {
    /*如果不想让按钮在一开始的时候存在，而是在滚动了一定的距离的时候再出现，那设置 一个滚动条的监听*/
    handleScroll() {
      // 当滚动的距离大于700 时出现该按钮
      this.scrollTop = window.pageYOffset;
      if (window.pageYOffset / 100 > 2) {
        this.scrollType = true;
      } else {
        this.scrollType = false;
      }
    },
    change(item) {
      if (item.type == 1) {
        return this.common.precision_basic(
          (item.min * item.rate * item.day) / 100
        );
      } else {
        return this.common.precision_basic((item.min * item.rate) / 100);
      }
    },
    onLoad() {
      this.page = 1;
      this.empty = false;
      this.list = [];
      this.finished = false;
      this.loading = true;
      Fetch("/index/item_list", {
        page: this.page,
        listRows: this.listRows,
        type: 0,
        baokuan: 2,
      }).then((r) => {
        if (r.data.length == 0) this.empty = true;
        var list = r.data.list;
        for (var i = 0; i < list.length; i++) {
          const item = Object.assign({}, list[i]);
		  let nowTime = moment().valueOf()/1000;
          if (item.end_time <= nowTime) {
            // 产品已结束，为普通产品 status 为1
            item.status = 1;
          } else if (item.start_time > nowTime ) {
            item.status = 3; // 新品
          } else {
            // 产品一开始还未结束 为爆款 status 为 2
			  item.status = 2;
			  item.distanceEnd = (item.end_time - nowTime)*1000;
			  if(item.distanceEnd > 86400000){
				  this.countFormat = "DDD HHH mmm sss";
			  }else if(item.distanceEnd > 3600000){
				  this.countFormat = "HHH mmm sss";
			  }else if(item.distanceEnd > 60000){
				  this.countFormat = "mmm sss";
			  }else{
				  this.countFormat = "sss";
			  }
          }
		  console.log(item.id+'-----'+item.distanceEnd);
          this.list.push(item);
        }
        if (this.list.length >= r.data.length) {
          this.finished = true;
          return;
        }
        this.page = this.page + 1;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.basic_wrap {
  position: relative;
  margin-bottom: 100px;

  .item_wrap {
    width: 100%;
    margin-top: 20px;

    .item_list {
      position: relative;
      margin-bottom: 20px;

      .item {
        margin-bottom: 10px;

        .pos-relative {
          position: relative;

          .hot-tag {
            position: absolute;
            left: 10px;
            top: 10px;
          }
        }

        .logo {
          position: relative;

          div {
            position: absolute;
            bottom: 0px;
            width: 100%;
            background: #ffffff;
            height: 30px;
            line-height: 30px;
            opacity: 0.8;
            font-weight: bold;
            padding: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          img {
            width: 100%;
            border-radius: 5px;
            max-height: 260px;
          }
        }

        .detail {
          padding: 15px;
          line-height: 2;

          .detail_name {
          }

          .detail_num {
            font-weight: bold;
            color: #3cb371;
          }

          .progress {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
